<template>
  <div class="menu_form">
    <el-form :inline="true" label-position="right" :model="data.menuData" label-suffix="：" label-width="100px" ref="ruleForms" :rules="menuRule">
      <el-form-item label="应用区域">
        <yu-select select dictCode="sysSpaceList" v-model:value="data.menuData.spaceId" placeholder="请选择显示区域" />
      </el-form-item>
      <el-form-item label="上级菜单">
        <yu-select tree dictCode="sysMenuTree" checkStrictly placeholder="请选上级菜单" v-model:value="data.menuData.parentId" @change="change" />
      </el-form-item>

      <el-row>
        <el-col>
          <el-form-item label="菜单类型">
            <el-radio-group v-model="data.menuData.menuType" @change="menuTypeChange">
              <!-- 暂时不需要目录 根据是否末级自动判断 -->
              <!-- <el-radio-button label="0">目录</el-radio-button> -->
              <el-radio-button label="1">菜单</el-radio-button>
              <el-radio-button label="2">按钮</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="菜单图标">
          <yu-select icon v-model:value="data.menuData.menuIcon" />
        </el-form-item>
        <el-form-item label="菜单编码" prop="menuCode">
          <el-input v-model="data.menuData.menuCode"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="data.menuData.menuName"></el-input>
        </el-form-item>
        <el-form-item label="菜单排序">
          <el-input v-model="data.menuData.orderNum" type="number"></el-input>
        </el-form-item>
      </el-row>
      <el-form-item label="路由地址" v-if="data.menuData.menuType == 0 || data.menuData.menuType == 1">
        <el-input v-model="data.menuData.routerPath"></el-input>
      </el-form-item>
      <el-form-item label="组件路径" v-if="data.menuData.menuType == 1">
        <el-input v-model="data.menuData.filePath"></el-input>
      </el-form-item>
      <el-form-item label="路由参数" v-if="data.menuData.menuType == 1">
        <el-input v-model="data.menuData.menuParam"></el-input>
      </el-form-item>
      <el-form-item label="权限字符" v-if="data.menuData.menuType == 1 || data.menuData.menuType == 2">
        <el-input v-model="data.menuData.menuAuthority"></el-input>
      </el-form-item>
      <el-row v-if="menuData.menuType == 1">
        <el-form-item label="是否缓存">
          <el-radio-group v-model="data.menuData.isCache" @change="isCache">
            <el-radio-button label="1">缓存</el-radio-button>
            <el-radio-button label="0">不缓存</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示状态">
          <el-radio-group v-model="data.menuData.menuHidden" @change="menuHidden">
            <el-radio-button label="0">显示</el-radio-button>
            <el-radio-button label="1">隐藏</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-form-item label="使用状态">
        <el-radio-group v-model="data.menuData.isStop" @change="isStop">
          <el-radio-button label="0">正常</el-radio-button>
          <el-radio-button label="1">停用</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-row>
        <el-form-item label="备注" prop="mome">
          <el-input v-model="data.menuData.mome" type="textarea" maxlength="50" input-style="width:100%"></el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <div>
      <el-button @click="save(ruleForms)">确定</el-button>
      <el-button @click="cell">取消</el-button>
    </div>
  </div>
</template>

<script setup>
  import { reactive, ref, toRef, getCurrentInstance, onBeforeMount } from 'vue';
  let { proxy } = getCurrentInstance();
  import { systemStore } from '@/pinia/system';
  import { storeToRefs } from 'pinia';
  const store = systemStore();
  const props = defineProps({
    menuData: {
      type: Object,
      default: { isStop: '0', isHidden: '0', isCache: '0' },
    },
    isShow: { type: Boolean, default: false },
  });
  const data = reactive({
    menuData: {},
    isShow: { type: Boolean, default: false },
  });
  data.menuData = toRef(props, 'menuData');
  data.isShow = toRef(props, 'isShow');
  const ruleForms = ref();
  const menuRule = ref({
    menuName: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
  });
  const emits = defineEmits(['update:isShow', 'getMenu']);
  const save = ruleForms => {
    ruleForms.validate(valid => {
      if (valid) {
        proxy.$api.menu.saveMenu(data.menuData).then(res => {
          if (res.code != -1) {
            proxy.$message({
              type: 'success',
              message: res.msg,
            });
            //处理菜单重置
            store.restMenu();

            emits('update:isShow', false);
          } else {
            proxy.$message({
              type: 'error',
              message: res.msg,
            });
          }
        });
      } else {
        return false;
      }
    });
  };
  const menuTypeChange = val => {
    menuData.value.menuType = val;
  };
  const cell = () => {
    debugger;
    emits('update:isShow', false);
  };
</script>
<style lang="scss" scoped>
  .menu_form {
    padding-left: 30px;
  }
</style>
